<template>
	<view class="flex-col page">
		<view class="d-flex align-items-top pt-3 px-3" style="text-align: justify;">
			<image style="width: 36rpx;height:36rpx;"  src="../../static/imgs/warning.png" mode=""></image>
			<text class="ps-2 flex-1 font-12 font-500 text-666D73">充值金额终身有效，支付成功后概不支持退款，如需转移账号可联系客服操作</text>
		</view>
		<view class="list" v-if="list.length">
			<view class="d-flex justify-content-between align-items-center mx-3 border-line" v-for="(v,i) in list"
				:key="i">
				<view class="font-18">
					<view class="d-flex align-items-center text-AAB5BF">
						<view class=" text-222426">
							<text class="font-700"> 充{{v.num}}元</text>
						</view>
						<view class="ps-2 font-14">
							(赠送 <text class="text-222426 font-500">{{v.extra}} </text>元，实得<text
								class="text-222426 font-500">{{v.num + v.extra}}</text>元）</text>
						</view>
					</view>
				</view>
				<view class="gou" @click="idx=i">
					<image v-if="idx==i" class="w-100 h-100" src="../../static/imgs/choose-fill.png" mode=""></image>
					<image v-else class="w-100 h-100" src="../../static/imgs/choose.png" mode=""></image>
				</view>
			</view>
		</view>
		<view v-else class="empty d-flex justify-content-center flex-column align-items-center">
			<image src="../../static/imgs/empty.png" class="img" />
			<view class="text-AAB5BF mt-1 pt-3">暂时没有数据</view>
		</view>
		<view class="position-fixd save-action ">
			<view class="px-3">
				<button class="button font-20 bg-theme" :disabled="idx==-1" @click="recharge">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				idx: -1,
				group_code: '',
				list: [{
					recharge: 500,
					send: 100,
					total: 600
				}, {
					recharge: 1000,
					send: 300,
					total: 1300
				}, {
					recharge: 1000,
					send: 300,
					total: 1300
				}]
			};
		},
		onLoad() {
			this.getList()
			uni.hideShareMenu()
		},
		methods: {
			getList() {
				this.$u.api.getChargeOptions()
					.then((res) => {
						if (1 == res.code) {
							this.list = res.data
							// this.selectedType = res.data[0]
						}
					})
			},
			recharge() {

				uni.showModal({
					title: '提示',
					content: `你确认要充值: ${this.list[this.idx].num}吗？`,
					success: (res) => {
						if (res.confirm) {
							this.$u.api.createTransaction({
								type: 2, //余额充值
								item_key: this.list[this.idx].id,
							}).then(res => {
								let data = res.data
								if (0 == res.code) {
									this.$u.toast(res.msg)
									return
								}
								return new Promise((resolve, reject) => {
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: data.timeStamp,
										nonceStr: data.nonceStr,
										package: data.package,
										signType: data.signType,
										paySign: data.paySign,
										success: function(res) {
											resolve(res)
										},
										fail: function(err) {
											reject(err);
										}
									});
								})
							}).then(async res => {
								console.log(res);
								if (res.code = 1) {
									await this.getInfo()
									this.$u.toast('你的余额充值成功')
									setTimeout(() => {
										this.$u.route({
											url: '/pages/myCenter/myCenter',
											type: 'tab'
										})
									}, 1500)
								} else {
									this.$u.toast(res.msg)
								}
							}, err => {
								this.$u.toast('购买取消或者失败，请联系管理员')
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			getInfo() {
				if (this.vuex_has_login) {
					this.$u.api.getUserInfo().then(res => {
						this.$u.vuex('vuex_user', {
							...this.vuex_user,
							...res.data
						})
					})
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.border-line {
		border-bottom: 1px solid #f5f7f8;
	}

	.page {
		.empty {
			height: 70vh;
			image {
				width: 288rpx;
				height: 304rpx;
			}
		}
		.list {
			>view {
				padding: 30rpx 0;
			}

			>view:last-child {
				margin-bottom: 15vh;
			}
		}

		.gou {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.save-action {
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		padding-bottom: 118rpx;
		padding-top: 20rpx;
		width: 100%;
		height: 170rpx;
		background-color: white;

		.button {
			padding: 0 16px;
			height: 96rpx;
			line-height: 96rpx;
			color: rgb(255, 255, 255);
			font-weight: 600;
			border-radius: 40rpx 0 40rpx 40rpx;

			&[disabled]:not([type]) {
				background-color: #AAB5BF !important;
			}
		}
	}
</style>